//光配连接
var PhysicalConnectChart = Chart = {
    DeviceWidth:240,//橱柜宽度
    DeviceSpace:200,//设备间隔
    DeviceVerSpace:40,//设备竖向间隔
    DeviceColumn:3,
    TitleHeight:40,//橱柜标题高度
    TitleBg:'#6699cc',//橱柜标题背景
    TitleFontSize:'20',//橱柜标题字体大小
    DeviceHeight:60,
    PortHeight:50,
    iconWidth : 30,
    iconHeight : 30,
    parseFrom: function(linkInfoData){
        /*
        {
        "count": 10,
        "list": [
            {
                "CUBICLE_DESC": "#1主变保护A柜",
                "CUBICLE_ID": 2,
                "CUBICLE_NAME": "20",
                "PATH_ID": 300,
                "PORT_DIRECTION": "Tx",
                "PORT_ID": 40,
                "PORT_INDEX": 0,
                "PORT_NAME": "2X-C",
                "PORT_PLUG": "LC",
                "REGION_ID": 1,
                "UNIT_CLASS": "IED",
                "UNIT_DESC": "#1主变保护装置A",
                "UNIT_ID": 4
            },
            ...
        ]
        */
        var chart = {};
        chart.x=0;
        chart.y=0;
        chart.linkInfoData = linkInfoData;
        chart.devices = [];
        chart.clickedObjects = [];//保存可点击对象
        chart.linkInfoData.list.sort(function(a,b){
            return a.PORT_INDEX-b.PORT_INDEX;
        });
        for(var k in chart.linkInfoData.list){
            var data = chart.linkInfoData.list[k];
            console.log(data);
        }
        for(var i=0;i<chart.linkInfoData.list.length;i++){
            var data = chart.linkInfoData.list[i];
            var device = {};
            if(i == 0){
                device.data = data;
                device.leftData = null;
                device.rightData = data;
            }else{
                device.data = data;
                device.leftData = data;
                if(device.data.UNIT_CLASS == 'ODF'){
                    device.rightData = "ODF";
                }else{
                    if(i+1<chart.linkInfoData.list.length){
                        device.rightData = chart.linkInfoData.list[i+1];
                        i+=1;
                    }else{
                        device.rightData = null;
                    }
                }
            }
            chart.devices.push(device);
        }

        //增加一些方法
        chart.getTotalWidth = function(){
            var c = PhysicalConnectChart.DeviceColumn;
            var r = Math.ceil(this.devices.length / 3);
            return PhysicalConnectChart.DeviceWidth * c + PhysicalConnectChart.DeviceSpace * (c + 1);
        };
        chart.getTotalHeight = function(){
            var c = PhysicalConnectChart.DeviceColumn;
            var r = Math.ceil(this.devices.length / 3);
            return (PhysicalConnectChart.TitleHeight + PhysicalConnectChart.DeviceHeight + PhysicalConnectChart.PortHeight) * r + PhysicalConnectChart.DeviceVerSpace * (r - 1);
        }
        chart.draw = function(canvas){
            PhysicalConnectChart.draw(this, canvas);
        };
        chart.getPortByPoint = function(x ,y){
            for(var i=0;i<this.clickedObjects.length;i++){
                //1.点击的是不是此交换机接口？
                var p = this.clickedObjects[i];
                //上半部分是of_id
                if(p.x < x && p.x + p.w > x && p.y < y && p.y + p.h > y){
                    return p;
                }
            }
            return null;
        }
        return chart;
    },
    drawCubicle : function(device,canvas){
        var x = device.x;
        var y = device.y;
        var data = device.data;
        //1.橱柜
        //绘制背景
        canvas.fillStyle = Chart.TitleBg;
        canvas.fillRect(x, y, Chart.DeviceWidth, Chart.TitleHeight + Chart.DeviceHeight + Chart.PortHeight);
        //小图标
        var img = new Image();    
        img.src = config.icon_cabinet_url;
        if(img.complete){
            canvas.drawImage(img,x, y+5, Chart.iconWidth , Chart.iconHeight);
        }else{
            img.onload = function(){
                canvas.drawImage(img,x, y+5, Chart.iconWidth , Chart.iconHeight);
            }
        }
        //绘制标题
        canvas.font = Chart.TitleFontSize + "px " + Device.headerFontFamily;
        canvas.fillStyle = Device.headerFontColor;
        canvas.textAlign="left";
        canvasTextAutoLine(data.CUBICLE_DESC,canvas,x + Chart.iconWidth, y - 3, Chart.DeviceWidth - Chart.iconWidth - 20, Chart.TitleHeight, Chart.TitleFontSize + 10,Chart.TitleFontSize,'middle');

        //2.装置
        //绘制装置标题
        var xx = x + 1;
        var yy = y + Chart.TitleHeight;
        //绘制背景
        canvas.fillStyle = '#427d78';
        canvas.fillRect(xx, yy, Chart.DeviceWidth - 2, Chart.DeviceHeight);
        //小图标
        var img1 = new Image();
        img1.src = config.icon_device_url;
        if(data.UNIT_CLASS == 'SWITCH'){
            img1.src = config.icon_switch_url;
        }else if(data.UNIT_CLASS == 'ODF'){
            img1.src = config.icon_odf_url;
        }
        if(img1.complete){
            canvas.drawImage(img1,xx + 10, yy + Chart.DeviceHeight / 2 - Chart.iconHeight / 2, Chart.iconWidth , Chart.iconHeight);
        }else{
            img1.onload = function(){
               canvas.drawImage(img1,xx + 10, yy + Chart.DeviceHeight / 2 - Chart.iconHeight / 2, Chart.iconWidth , Chart.iconHeight);
            }
        }
        canvas.beginPath();
        canvas.strokeStyle = Chart.TitleBg;
        canvas.lineWidth=1;
        canvas.moveTo(xx + Chart.PortHeight, yy);
        canvas.lineTo(xx + Chart.PortHeight, yy + Chart.DeviceHeight);
        canvas.stroke();

        canvas.fillStyle = '#35857e';
        canvas.fillRect(xx + Chart.PortHeight + 1, yy, Chart.DeviceWidth - 1 - Chart.PortHeight, Chart.DeviceHeight);
        //绘制标题
        canvas.font = Device.headerFontSize + "px " + Device.headerFontFamily;
        canvas.fillStyle = Device.headerFontColor;
        canvas.textAlign="left";
        canvasTextAutoLine(data.UNIT_DESC,canvas,xx + 2 + Chart.PortHeight, yy, Chart.DeviceWidth - 4 - Chart.PortHeight, Chart.DeviceHeight, Device.headerFontSize + 10,Device.headerFontSize,'middle');

        //3.端口
        var xxx = x + 1;
        var yyy = yy + Chart.DeviceHeight;
        //绘制背景
        canvas.fillStyle = '#427d78';
        canvas.fillRect(xxx, yyy + 1, Chart.DeviceWidth - 2, Chart.PortHeight - 2);
    },
    draw : function(chart, canvas){
        var left = chart.x + PhysicalConnectChart.DeviceSpace;
        chart.clickedObjects = [];
        //画主装置
        for(var i=0;i<chart.devices.length;i++){
            var data = chart.devices[i].data;
            var c = i % PhysicalConnectChart.DeviceColumn;
            var r = Math.floor(i / PhysicalConnectChart.DeviceColumn);
            var x = 0;
            if(r%2 == 0){
                //0,2,4...等偶数行，从左向右排
                x = left + c * (PhysicalConnectChart.DeviceWidth + PhysicalConnectChart.DeviceSpace);
            }else{
                //1,3,5...等奇数行，从右向左排
                x = left + (PhysicalConnectChart.DeviceColumn - c - 1) * (PhysicalConnectChart.DeviceWidth + PhysicalConnectChart.DeviceSpace);
            }
            var y = chart.y + r * (PhysicalConnectChart.TitleHeight + PhysicalConnectChart.DeviceHeight + PhysicalConnectChart.PortHeight + PhysicalConnectChart.DeviceVerSpace);
            chart.devices[i].x = x;
            chart.devices[i].y = y;
            chart.devices[i].c = c;
            chart.devices[i].r = r;
            Chart.drawCubicle(chart.devices[i],canvas);
        }
        //画端口及连接线
        for(var i=0;i<chart.devices.length - 1;i++){
            Chart.drawDevicePort(chart.devices[i], chart.devices[i+1],chart,canvas);
        }
    },
    drawDevicePort : function(dLeft, dRight, chart, canvas){
        //画端口
        if(dLeft.r%2 == 0){
            //0,2,4...等偶数行，从左向右排
            Chart.drawPort(dLeft.x + Chart.DeviceWidth - Chart.PortHeight,
                dLeft.y + Chart.TitleHeight + Chart.DeviceHeight,'right',dLeft.data.UNIT_CLASS=='ODF'?dLeft.data:dLeft.rightData,canvas);
        }else{
            //1,3,5...等奇数行，从右向左排
            Chart.drawPort(dLeft.x,
                dLeft.y + Chart.TitleHeight + Chart.DeviceHeight,'left',dLeft.data.UNIT_CLASS=='ODF'?dLeft.data:dLeft.rightData,canvas);
        }
        if(dRight.r%2 == 0){
            //0,2,4...等偶数行，从左向右排
            Chart.drawPort(dRight.x,
                dRight.y + Chart.TitleHeight + Chart.DeviceHeight,'left',dRight.data.UNIT_CLASS=='ODF'?dRight.data:dRight.leftData,canvas);;
        }else{
            //1,3,5...等奇数行，从右向左排
            Chart.drawPort(dRight.x + Chart.DeviceWidth - Chart.PortHeight,
                dRight.y + Chart.TitleHeight + Chart.DeviceHeight,'right',dRight.data.UNIT_CLASS=='ODF'?dRight.data:dRight.leftData,canvas);
        }
        //画线
        if(dLeft.r == dRight.r){
            //画直线
            if(dLeft.r%2 == 0){
                Chart.drawLiner(
                    dLeft.x + Chart.DeviceWidth,
                    dLeft.y + Chart.TitleHeight + Chart.DeviceHeight + Chart.PortHeight / 2,
                    dRight.x,
                    dRight.y + Chart.TitleHeight + Chart.DeviceHeight + Chart.PortHeight /2,
                    dLeft.data.UNIT_CLASS=='ODF'?dLeft.data:dLeft.rightData,dRight.leftData,
                    chart,canvas
                );
            }else{
                Chart.drawLiner(
                    dLeft.x,
                    dLeft.y + Chart.TitleHeight + Chart.DeviceHeight + Chart.PortHeight / 2,
                    dRight.x + Chart.DeviceWidth,
                    dRight.y + Chart.TitleHeight + Chart.DeviceHeight + Chart.PortHeight /2,
                    dLeft.data.UNIT_CLASS=='ODF'?dLeft.data:dLeft.rightData,dRight.leftData,
                    chart,canvas
                );
            }
        }else{
            //画折线
            if(dLeft.r%2 == 0){
                Chart.drawBrokenLiner(
                    dLeft.x + Chart.DeviceWidth,
                    dLeft.y + Chart.TitleHeight + Chart.DeviceHeight + Chart.PortHeight / 2,
                    dRight.x + Chart.DeviceWidth,
                    dRight.y + Chart.TitleHeight + Chart.DeviceHeight + Chart.PortHeight /2,
                    dLeft.data.UNIT_CLASS=='ODF'?dLeft.data:dLeft.rightData,dRight.leftData,'right',
                    chart,canvas
                );
            }else{
                Chart.drawBrokenLiner(
                    dLeft.x,
                    dLeft.y + Chart.TitleHeight + Chart.DeviceHeight + Chart.PortHeight / 2,
                    dRight.x,
                    dRight.y + Chart.TitleHeight + Chart.DeviceHeight + Chart.PortHeight /2,
                    dLeft.data.UNIT_CLASS=='ODF'?dLeft.data:dLeft.rightData,dRight.leftData,'left',
                    chart,canvas
                );
            }
        }
    },
    drawPort:function(x,y,portDirection,data,canvas){
        var img = new Image();    
        img.src = config.icon_cabinet_url;
        if(data.UNIT_CLASS == "ODF"){
            if(portDirection == "left"){
                img.src = config.icon_odf_left_in_out_url;
            }else{
                img.src = config.icon_odf_right_in_out_url
            }
        }else{
            if(portDirection == "left"){
                if(data.PORT_DIRECTION == "Rx"){
                    img.src = config.icon_left_in_url;
                }else if (data.PORT_DIRECTION == "Tx"){
                    img.src = config.icon_left_out_url;
                }else{
                    img.src = config.icon_left_in_out_url;
                }
            }else{
                if(data.PORT_DIRECTION == "Rx"){
                    img.src = config.icon_right_in_url;
                }else if (data.PORT_DIRECTION == "Tx"){
                    img.src = config.icon_right_out_url;
                }else{
                    img.src = config.icon_right_in_out_url;
                }
            }
        }
        if(img.complete){
            canvas.drawImage(img,x + 1, y + 1, Chart.PortHeight - 3, Chart.PortHeight - 3);
        }else{
            img.onload = function(){
                canvas.drawImage(img,x + 1, y + 1, Chart.PortHeight - 3, Chart.PortHeight - 3);
            }
        }
        //画线
        canvas.beginPath();
        canvas.strokeStyle = Chart.TitleBg
        canvas.lineWidth=1;
        if(portDirection == "left"){
            canvas.moveTo(x + Chart.PortHeight,y);
            canvas.lineTo(x + Chart.PortHeight,y + Chart.PortHeight);
        }else{
            canvas.moveTo(x,y);
            canvas.lineTo(x,y + Chart.PortHeight);
        }
        canvas.stroke();
        //画标题
        if(data.UNIT_CLASS == "ODF"){
            //画出名字
            canvas.font = Device.headerFontSize + "px " + Device.fontFamily;
            canvas.fillStyle = Device.headerFontColor;
            canvas.textAlign="center";
            if(portDirection == "left"){
                canvas.fillText(data.PORT_NAME,x + Chart.DeviceWidth / 2, y + Chart.PortHeight / 2 + Device.headerFontSize / 2, Chart.DeviceWidth - Chart.PortHeight * 2);
                chart.clickedObjects.push({
                    x:x,
                    y:y,
                    w:Chart.DeviceWidth,
                    h:Chart.PortHeight,
                    TYPE:'Port',
                    data:data
                });
            }else{
                canvas.fillText(data.PORT_NAME,x + Chart.PortHeight - Chart.DeviceWidth / 2, y + Chart.PortHeight / 2 + Device.headerFontSize / 2, Chart.DeviceWidth - Chart.PortHeight * 2);
                chart.clickedObjects.push({
                    x:x + Chart.PortHeight - Chart.DeviceWidth,
                    y:y,
                    w:Chart.DeviceWidth,
                    h:Chart.PortHeight,
                    TYPE:'Port',
                    data:data
                });
            }
        }else{
            //画出名字
            canvas.font = Device.headerFontSize + "px " + Device.fontFamily;
            canvas.fillStyle = Device.headerFontColor;
            canvas.textAlign="center";
            if(portDirection == "left"){
                canvas.fillText(data.PORT_NAME,x + Chart.PortHeight + (Chart.DeviceWidth - Chart.PortHeight * 2) / 4, y + Chart.PortHeight / 2 + Device.headerFontSize / 2, Chart.DeviceWidth - Chart.PortHeight * 2);
                chart.clickedObjects.push({
                    x:x,
                    y:y,
                    w:Chart.DeviceWidth / 2,
                    h:Chart.PortHeight,
                    TYPE:'Port',
                    data:data
                });
                //分割线
                canvas.beginPath();
                canvas.strokeStyle = Chart.TitleBg
                canvas.lineWidth=1;
                canvas.moveTo(x + Chart.DeviceWidth / 2,y);
                canvas.lineTo(x + Chart.DeviceWidth / 2,y + Chart.PortHeight);
                canvas.stroke();
            }else{
                canvas.fillText(data.PORT_NAME,x - (Chart.DeviceWidth - Chart.PortHeight * 2) / 4, y + Chart.PortHeight / 2 + Device.headerFontSize / 2, Chart.DeviceWidth - Chart.PortHeight * 2);
                chart.clickedObjects.push({
                    x:x + Chart.PortHeight - Chart.DeviceWidth / 2,
                    y:y,
                    w:Chart.DeviceWidth / 2,
                    h:Chart.PortHeight,
                    TYPE:'Port',
                    data:data
                });
                //分割线
                canvas.beginPath();
                canvas.strokeStyle = Chart.TitleBg
                canvas.lineWidth=1;
                canvas.moveTo(x + Chart.PortHeight - Chart.DeviceWidth / 2,y);
                canvas.lineTo(x + Chart.PortHeight - Chart.DeviceWidth / 2,y + Chart.PortHeight);
                canvas.stroke();
            }
        }
    },
    drawLiner:function(x1,y1,x2,y2,data1,data2,chart,canvas){
        var arrowColor = '#000000';
        if(data1.CUBICLE_ID == data2.CUBICLE_ID && fibreColor != undefined){
            arrowColor = fibreColor;
        }else if(data1.CUBICLE_ID != data2.CUBICLE_ID && cableColor != undefined){
            arrowColor = cableColor;
        }
        //画箭头
        drawArrow(canvas, x1 , y1, (x1<x2?x2 - 6:x2 + 6), y2, 20,25, 6, arrowColor);
        //画光纤编号
        var cx = (x1<x2?x1:x2) + Math.abs(x2 - x1) / 2;
        var cy = y1;
        var cw = Math.abs(x2 - x1) / 2;
        var ch = Device.headerFontSize * 2;
        cx -= cw/2;
        cy -= ch/2;
        canvas.fillStyle = Chart.TitleBg;;
        canvas.fillRect(cx, cy, cw, ch);
        canvas.fillStyle = "#35857e";
        canvas.fillRect(cx+2, cy+2, cw-4, ch-4);
        //异步画标题
        if(data1.CUBICLE_ID != data2.CUBICLE_ID){
            //光缆
            getCableNameAsyncFun(data1.CUBICLE_ID,data2.CUBICLE_ID,function(name){
                canvas.font = Device.headerFontSize + "px " + Device.fontFamily;
                canvas.fillStyle = Device.headerFontColor;
                canvas.textAlign="center";
                canvas.fillText(name,cx + cw/2, cy+ch/2+Device.headerFontSize/2-4, cw);
            });
            chart.clickedObjects.push({
                x:cx,
                y:cy,
                w:cw,
                h:ch,
                TYPE:'DEVICE-CABLE',
                data1:data1,
                data2:data2
            });
        }else{
            //纤芯
            getFibreNameAsyncFun(data1.PORT_ID,data2.PORT_ID,function(name){
                canvas.font = Device.headerFontSize + "px " + Device.fontFamily;
                canvas.fillStyle = Device.headerFontColor;
                canvas.textAlign="center";
                canvas.fillText(name,cx + cw/2, cy+ch/2+Device.headerFontSize/2-4, cw);
            });
            chart.clickedObjects.push({
                x:cx,
                y:cy,
                w:cw,
                h:ch,
                TYPE:'DEVICE-FIBRE',
                data1:data1,
                data2:data2
            });
        }
    },
    drawBrokenLiner:function(x1,y1,x2,y2,data1,data2,direct/*右边还是左边*/,chart,canvas){
        var arrowColor = '#000000';
        if(data1.CUBICLE_ID == data2.CUBICLE_ID && fibreColor != undefined){
            arrowColor = fibreColor;
        }else if(data1.CUBICLE_ID != data2.CUBICLE_ID && cableColor != undefined){
            arrowColor = cableColor;
        }
        var cx = 0 ;//电缆名框中点x
        var cy = 0 ;//电缆名框中点y
        if(direct == 'right'){
            //右边，向右折线
            canvas.beginPath();
            canvas.strokeStyle = arrowColor;
            canvas.lineWidth=6;
            canvas.moveTo(x1,y1);
            canvas.lineTo(x1 + PhysicalConnectChart.DeviceWidth / 3, y1);
            canvas.lineTo(x1 + PhysicalConnectChart.DeviceWidth / 3, y2 + 3);
            canvas.stroke();
            //画箭头
            if(x1 + PhysicalConnectChart.DeviceWidth / 3 > x2){
                toX = x2 + 6;
            }else{
                toX = x2 - 6;
            }
            drawArrow(canvas,x1 + PhysicalConnectChart.DeviceWidth / 3, y2, toX, y2, 20,25, 6, arrowColor);
            cx = x1 + PhysicalConnectChart.DeviceWidth / 3;
            cy = y1 + (y2 - y1) / 2;
        }else{
            //左边，向左折线
            canvas.beginPath();
            canvas.strokeStyle = arrowColor;
            canvas.lineWidth=6;
            canvas.moveTo(x1,y1);
            canvas.lineTo(x1 - PhysicalConnectChart.DeviceWidth / 3, y1);
            canvas.lineTo(x1 - PhysicalConnectChart.DeviceWidth / 3, y2 + 3);
            canvas.stroke();
            //画箭头
            if(x1 - PhysicalConnectChart.DeviceWidth / 3 > x2){
                toX = x2 + 6;
            }else{
                toX = x2 - 6;
            }
            drawArrow(canvas,x1 - PhysicalConnectChart.DeviceWidth / 3, y2, toX, y2, 20,25, 6, arrowColor);
            cx = x1 - PhysicalConnectChart.DeviceWidth / 3;
            cy = y1 + (y2 - y1) / 2;
        }
        
        //画光纤编号
        var cw = PhysicalConnectChart.DeviceSpace / 2;
        var ch = Device.headerFontSize * 2;
        cx -= cw/2;
        cy -= ch/2;
        canvas.fillStyle = Chart.TitleBg;;
        canvas.fillRect(cx, cy, cw, ch);
        canvas.fillStyle = "#35857e";
        canvas.fillRect(cx+2, cy+2, cw-4, ch-4);
        //异步画标题
        if(data1.CUBICLE_ID != data2.CUBICLE_ID){
            //光缆
            getCableNameAsyncFun(data1.CUBICLE_ID,data2.CUBICLE_ID,function(name){
                canvas.font = Device.headerFontSize + "px " + Device.fontFamily;
                canvas.fillStyle = Device.headerFontColor;
                canvas.textAlign="center";
                canvas.fillText(name,cx + cw/2, cy+ch/2+Device.headerFontSize/2-4, cw);
            });
            chart.clickedObjects.push({
                x:cx,
                y:cy,
                w:cw,
                h:ch,
                TYPE:'DEVICE-CABLE',
                data1:data1,
                data2:data2
            });
        }else{
            //纤芯
            getFibreNameAsyncFun(data1.PORT_ID,data2.PORT_ID,function(name){
                canvas.font = Device.headerFontSize + "px " + Device.fontFamily;
                canvas.fillStyle = Device.headerFontColor;
                canvas.textAlign="center";
                canvas.fillText(name,cx + cw/2, cy+ch/2+Device.headerFontSize/2-4, cw);
            });
            chart.clickedObjects.push({
                x:cx,
                y:cy,
                w:cw,
                h:ch,
                TYPE:'DEVICE-FIBRE',
                data1:data1,
                data2:data2
            });
        }
    }
};